<template>
  <view class="market flex-col">
    <!-- header -->

    <t-header :showLeft="false">
      行情
      <template #right>
        <uni-icons
          type="search"
          size="24"
          color="#ffffff"
          class="arrow-left-icon"
          @click="onSearch()"
        />
      </template>
    </t-header>

    <!-- 大盘数据 -->
    <view class="market-info">
      <view class="scroll-list">
        <view
          class="quotation flex-grow-0"
          v-for="(item, index) in hots"
          :key="index"
          :class="item.allcodes_arr[5] > 0 ? 'plus' : 'greenbg'"
        >
          <!-- @click="toStock(item)" -->
          <view class="quotation-title">{{ item.title }}</view>
          <view class="num">{{ item.allcodes_arr[3] }}</view>
          <view class="exponent flex-row justify-between">
            <view class=""
              >{{ item.allcodes_arr[4] > 0 ? '+' : ''
              }}{{ item.allcodes_arr[4] }}</view
            >
            <view class=""
              >{{ item.allcodes_arr[5] > 0 ? '+' : ''
              }}{{ item.allcodes_arr[5] }}%</view
            >
          </view>
        </view>
      </view>
    </view>

    <!-- tabs -->
    <view class="tabs">
      <v-tabs
        paddingItem="0 40rpx"
        fontSize="30rpx"
        lineHeight="6rpx"
        lineColor="#f42f3c "
        field="name"
        v-model="tabIndex"
        bgColor="transparent"
        color="#797979"
        activeColor="#000000"
        activeFontSize="36rpx"
        activeBgColor="transparent"
        :tabs="tabs"
        pillsColor="#fff"
        pills
      ></v-tabs>
    </view>

    <!-- 列表内容 -->
    <view class="list-con rel">
      <swiper
        :style="{ height: height }"
        :current="tabIndex"
        @change="swiperChange"
      >
        <swiper-item v-for="(tab, i) in tabs" :key="i">
          <mescroll-item
            ref="mescrollItem"
            :i="i"
            :index="tabIndex"
            :tabs="tabs"
            :height="height"
          ></mescroll-item>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { onLoad, onShow } from '@dcloudio/uni-app';

  // 接口
  import { hotIndex, zdfenbu } from '@/api/index';

  // 组件
  import vTabs from '@/components/v-tabs/v-tabs.vue';
  import MescrollItem from '@/pages/tabbar/comp/rt-swiper-item.vue';
  import THeader from '@/components/views/t-header/index.vue'; // 头部组件

  defineOptions({
    name: 'Market',
  });

  const height = ref('');

  // tabs
  const tabIndex = ref(0);
  const tabs = reactive([
    {
      name: '自选',
      api: 'getZixuan',
    },
    {
      name: '沪深',
      api: 'getTabDetail',
    },
    {
      name: '创业',
      api: 'getCyDetail',
    },
    {
      name: '科创',
      api: 'getKcDetail',
    },
    {
      name: '北证',
      api: 'getBjDetail',
    },
  ]);

  const swiperChange = (e) => {
    console.log('e', e);
    // this.tabIndex = e.detail.current
  };

  // 加载大盘数据
  let timer = null;
  const hots = ref([]);
  const getIndex = async () => {
    try {
      if (timer) {
        clearTimeout(timer);
      }

      const res = await hotIndex();
      console.log('res', res);
      hots.value = res.data?.list || [];

      timer = setTimeout(getIndex, 2000);
    } catch (err) {
      console.error('getIndex', err);
    }
  };

  // 加载初始数据
  const loadData = () => {
    getIndex();
  };

  onLoad(() => {
    // 需要固定swiper的高度 (需减去悬浮tabs的高度64rpx)
    height.value =
      uni.getSystemInfoSync().windowHeight - uni.upx2px(64 * 2) + 'px';
    loadData();
  });

  onShow(() => {
    let i = uni.getStorageSync('INDEX');
    if (i) {
      tabIndex.value = i;
      uni.removeStorageSync('INDEX');
    }
  });

  // 搜索
  const onSearch = () => {
    uni.navigateTo({
      url: '/pages/search/index',
    });
  };
</script>

<style lang="scss" scoped src="./css/index.scss"></style>
